<template>
	<view class="container">
		<view class="head-navigation">
			<view class="back-box" @click="backPrev()" v-if="route=='product'||route=='getredpackage'">
				<image src="/static/images/back.png" mode=""></image>
			</view>
			<view class="back-box" @click="backHome()" v-else >
				<image src="/static/images/home.png" mode=""></image>
			</view>
		</view>
		<view class="logo">
			<image src="/static/images/logo.png"  mode=""></image>
		</view>
		
		<view class ="show-login" v-if="showLogin==true">
			<view class="input-box">
				<input type="number" pattern="\d*" maxlength="11" class="phone-ipt" value="" v-model="phone" placeholder="请输入手机号码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			</view>
			<view class="input-box-ot">
				<view class="input-box-code">
					<input type="number" class="phone-ipt phone-ipt-code " v-model="smsCode" placeholder="请输入验证码"  placeholder-style="color:#C0C0C0;font-size:28rpx;" />
				</view>
				<view class="input-box-code-msg">
					<view class="getMsgCode" @click="getVerificationCode()" >{{ !showCount?'获取验证码':countTime+'秒后重试'}}</view>
				</view>
			</view>
			
			<view class="login" @click="loginByApp()">登录</view>
			<view class="loginWx" @click="loginByWx()">微信用户一键登录</view>
		</view>
		
		<view v-else>
			<view class="login" @click="loginByWx()">微信用户一键登录</view>
			<view class="loginWx" @click="clickshowLogin()">短信验证码登录</view>
		</view>
		
		<view class="agreement">
			<image src="/static/images/desc-icon.png" mode="" v-if='isAgree' @click="handleClick"></image>
			<image src="/static/images/desc-icon-selected.png" mode="" v-else  @click="handleClick"></image>
			<view class="agreement-desc">请阅读并同意
				<text >《热-CLUB注册协议》</text>
				<text>《热-CLUB隐私权政策》</text>
			，首次登录将自动注册
			</view>
		</view>
	</view>
	
</template>
<script>
	/* var lastTouchEnd = 0;
	document.documentElement.addEventListener('touchend', function (event) {undefined
		var now = Date.now();
		if (now - lastTouchEnd <= 300) {undefined
			event.preventDefault();
		}
		lastTouchEnd = now;
	}, false); */
	import store from "store";
	import { loginByApp,getCapchaBeforeSms,sendingSmsCode } from 'api/authApi';
	
	import { mapGetters,mapMutations,mapActions } from 'vuex'
	import Base64 from 'base-64';
	const getDefaultState = () => {
		return {
			wxCode: null,
			inviteString: null,
			inviteCode: null,
			inviteProductId: null,
			accessToken: null, //获取本地存储的 access_token
			accessTokenRefreshAt: null, //获取本地存储的刷新 access_token_refresh_at
			accessTokenExpiredAt: null, //获取本地存储的到期 access_token_expired_at
			phoneNum: null,
			openid: null,
			unionid: null
		}
	}
	export default {
		name: "auth",
		store,
		data() {
			return {
				phone:'',
				route:'',
				invite_code:null,
				is_share:'false',
				captcha_image:null,
				imgCode:null,
				captcha_key:null,
				showLogin:'false',
				verificationCode:'',
				showCount:false,
				countTime:null,
				smsCode:'',
				isAgree:true
			}
		},
		computed: {
			...mapGetters([
				'isLogin'
			])
		},
		methods: {
			...mapActions([
				'login'
			]),
			...mapMutations([
				'resetState',
				'setToken',
				'setUser',
				'resetAddress'
			]),
			handleClick() {
				this.isAgree = !this.isAgree
			},
			goRegister() {
				console.log(123);
				uni.navigateTo({
					url:'https://www.littleshop.shop/wap/configs/user/agreement'
				})
			},
			goys() {
				uni.navigateTo({
					url:'https://www.littleshop.shop/wap/configs/user/privacy'
				})
			},
			clickshowLogin(){
				
				this.showLogin = true;
				console.log(this.showLogin);
			},
			forgetPassword(){
				// type 0 forget
				uni.navigateTo({
					url:'/packs/pages/modifyPassword/modifyPassword?type=0'
				})
			},
			getVerificationCode(){
				if (this.showCount) { return }
				let phone = this.phone;
				let isPhone = this.isPhoneAvailable(phone);
				if(phone==''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}else if(!isPhone){
					uni.showToast({
						icon:'none',
						title:'请输入正确的手机号'
					})
				}else{
					let time = 60;
					let params = {
						phone:this.phone,
						type:'login_account',
					}
					sendingSmsCode(params).then(res=>{
						if(!res.message){
							this.showCount = true;
							this.countTime = time;
							this.setCountTime(time);
							this.sms_key = res.key;
						}else{
							uni.showModal({
							  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
							})
						}
						
					})
				}
			},
			setCountTime(time) {
				let count = setInterval(() => {
					time = time - 1
					this.countTime = time
					console.log(this.countTime);  
					if (this.countTime == 0) {
						this.showCount = false
						this.countTime = null
						clearInterval(count)
					}
				}, 1000)
			},
			async loginByApp(){
				let agree = this.isAgree;
				if(agree){
					uni.showToast({
						icon:'none',
						title:'请勾选协议'
					})
					return false;
				}
				let params = {
					phone:this.phone,
					sms_code:this.smsCode,
					sms_key:this.sms_key
				}
				await this.login(params)
				
				if(await this.isLogin){
					uni.removeStorage({
						key: 'invite_code',
						success: function (res) {}
					})
					if(this.is_share == 'false'){
						var pages= getCurrentPages()
						if(pages.length>1){
							uni.navigateBack({})
						}else{
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}else{
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				}
			},
			backHome(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			backPrev(){
				uni.navigateBack({})
			},
			signOut(){
				uni.clearStorage()
				this.resetState(getDefaultState())
				this.setUser(null)
				this.resetAddress()
			},
			isPhoneAvailable(str) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			}
		},
		async onLoad(options) {
			if(options.query){
				let new_options = JSON.parse(Base64.decode(options.query))
				if(new_options.inviter_code){
					this.invite_code = new_options.inviter_code
					uni.setStorage({
						key: 'invite_code',
						data: new_options.inviter_code
					})
				}else{
					uni.getStorage({
						key: 'invite_code',
						success: function (res) {
							_this.invite_code = res.data
						}
					})
				}
				if(new_options.is_share){
					this.is_share = new_options.is_share + ''
				}
			}else{
				if(options.from!=undefined){
					this.route = options.from
				}
				if(options.is_share!=undefined){
					this.is_share = options.is_share
				}
				if(options.invite_code!=undefined){
					this.invite_code = options.invite_code;
					uni.setStorage({
						key: 'invite_code',
						data: options.invite_code
					})
				}else{
					uni.getStorage({
						key: 'invite_code',
						success: function (res) {
							_this.invite_code = res.data
						}
					})
				}
			}
			if(options.singleLogin==1){
				this.signOut()
			}
		},
		async onReady(){
			/* if (await this.isLogin) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} */
		}
	}
</script>

<style lang="scss" scoped>
	.head-navigation{
		width:100%;
		height: 120rpx;
		background: rgba(0,0,0,0);
		position: fixed;
		top:0;
		left:0;
		z-index: 9999;
	}
	.back-box{
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			display: block;
			width:50rpx;
			height: 50rpx;
		}
	}
	.logo{
		width:224rpx;
		height: 260rpx;
		margin: 0 auto 74rpx;
		padding-top: 180rpx;
		>image{
			display: block;
			width: 100%;
			height:100%;
			border-radius: 20rpx;
		}
	}
	.logo-text{
		display: block;
		width: 150rpx;
		margin: 0 auto 70rpx;
	}
	.input-box{
		width: 632rpx;
		height: 92rpx;
		margin: 0 auto 16rpx;
		border-radius: 10rpx;
		border: 1rpx solid #999;
		display: flex;
		align-items: center;
		>view{
			display: flex;
			align-items: center;
			height: 100%;
			color: #C0C0C0;
			>image{
				display: block;
				width: 56rpx;
				height: 56rpx;
				margin-left: 24rpx;
			}
		}
		.imgCode{
			// width:280rpx;
			// height: 100%;
			
			width:230rpx;
			height:70%;
			margin-right: 30rpx;
			
			>image{
				display: block;
				width: 100%;
				height: 100%;
				// border-radius:0 42rpx 42rpx 0;
			}
		}
	}

	.phone-ipt{
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #555555;
		width: 420rpx;
	}
	.forget-password{
		display: flex;
		align-items: center;
		justify-content:flex-end;
		>text{
			font-size: 28rpx;
			font-weight: 400;
			color: #ACACAC;
			line-height: 28rpx;
			margin-right:75rpx;
		}
	}
	.login{
		width: 632rpx;
		height: 92rpx;
		background-color: #E97254 ;
		border-radius: 4rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		margin: 32rpx auto 0;
	}
	
	.loginWx{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		text-align: center;
		line-height: 100rpx;
	}
	.phone-ipt-code{
		width:410rpx;
	}
	.input-box-ot{
		width: 634rpx;
		height: 92rpx;
		margin: 0 auto 16rpx;
		display:block;
	}
	.input-box-code{
		width:404rpx;
		height:92rpx;
		float:left;
		border-radius: 10rpx;
		border: 1rpx solid #999;
		display: flex;
		align-items: center;
		
	}
	.input-box-code-msg{
		width:206rpx;
		height:92rpx;
		float:left;
		border-radius: 10rpx;
		border: 1rpx solid #E97254;
		display: flex;
		align-items: center;
		margin-left:16rpx;
		.getMsgCode{
			margin: 0 auto;
			font-size: 28rpx;
			font-weight: 400;
			color: #E97254;
		}
	}
	.agreement{
		width:100%;
		margin-top:60rpx;
		>image{
			float:left;
			margin-left:42rpx;
			width:32rpx;
			height:32rpx;
		}
		.agreement-desc{
			width:620rpx;
			float:left;
			font-size:20rpx;
			margin-left:8rpx;
			>text{
				color:#E97254;
				text-decoration-line: none; 
			}
		}
		
	}
</style>
